<template>
  <Layout title="房屋编辑" :has-back="true" :has-tabbar="false" ref="layout">
    <view
      style="
        padding: 20rpx;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
      "
    >
      <view
        style="flex: 1; min-height: 0; margin-top: 20rpx; margin-bottom: 20rpx"
      >
        <Scroll>
          <u-form
            ref="form"
            :model="formData"
            :labelStyle="{ fontSize: '40rpx' }"
          >
            <u-form-item label="组团">
              <u-input
                v-model="formData.groupName"
                @tap="showGroupPicker"
                :readonly="true"
              ></u-input>
              <u-picker
                :show="groupName.show"
                @cancel="closeGroupPicker"
                @confirm="groupPickerConfirm"
                :columns="groupName.columns"
                keyName="label"
                :immediateChange="true"
              ></u-picker>
            </u-form-item>
            <u-form-item label="姓名" prop="name">
              <view class="input">
                <u-input
                  v-model="formData.name"
                  :clearable="true"
                  @clear="nameClear"
                ></u-input>
              </view>
            </u-form-item>
            <u-form-item label="路址" prop="address">
              <view class="input">
                <u-input
                  v-model="formData.address"
                  :clearable="true"
                  @clear="addressClear"
                ></u-input>
              </view>
            </u-form-item>
            <u-form-item label="类型">
              <u-input
                v-model="formData.homeType"
                @tap="showHomeTypePicker"
                :readonly="true"
              ></u-input>
              <u-picker
                :show="homeType.show"
                @cancel="closeHomeTypePicker"
                @confirm="homeTypePickerConfirm"
                :columns="homeType.columns"
                keyName="label"
                :immediateChange="true"
              ></u-picker>
            </u-form-item>
            <u-form-item label="状态">
              <u-input
                v-model="formData.homeStatus"
                @tap="showHomeStatusPicker"
                :readonly="true"
              ></u-input>
              <u-picker
                :show="homeStatus.show"
                @cancel="closeHomeStatusPicker"
                @confirm="homeStatusPickerConfirm"
                :columns="homeStatus.columns"
                keyName="label"
                :immediateChange="true"
              ></u-picker>
            </u-form-item>
            <u-form-item label="装修">
              <u-input
                v-model="decorationStatus.value"
                @tap="showDecorationStatusPicker"
                :readonly="true"
              ></u-input>
              <u-picker
                :show="decorationStatus.show"
                @cancel="closeDecorationStatusPicker"
                @confirm="decorationStatusPickerConfirm"
                :columns="decorationStatus.columns"
                keyName="label"
                :immediateChange="true"
              ></u-picker>
            </u-form-item>
            <u-form-item label="常住">
              <u-input
                v-model="liveStatus.value"
                @tap="showLiveStatusPicker"
                :readonly="true"
              ></u-input>
              <u-picker
                :show="liveStatus.show"
                @cancel="closeLiveStatusPicker"
                @confirm="liveStatusPickerConfirm"
                :columns="liveStatus.columns"
                keyName="label"
                :immediateChange="true"
              ></u-picker>
            </u-form-item>
            <u-form-item label="友好">
              <u-input
                v-model="ownerType.value"
                @tap="showOwnerTypePicker"
                :readonly="true"
              ></u-input>
              <u-picker
                :show="ownerType.show"
                @cancel="closeOwnerTypePicker"
                @confirm="ownerTypePickerConfirm"
                :columns="ownerType.columns"
                keyName="label"
                :immediateChange="true"
              ></u-picker>
            </u-form-item>
            <u-form-item label="欠费">
              <u-input
                v-model="oweStatus.value"
                @tap="showOweStatusPicker"
                :readonly="true"
              ></u-input>
              <u-picker
                :show="oweStatus.show"
                @cancel="closeOweStatusPicker"
                @confirm="oweStatusPickerConfirm"
                :columns="oweStatus.columns"
                keyName="label"
                :immediateChange="true"
              ></u-picker>
            </u-form-item>
            <u-form-item label="习惯">
              <u-input
                v-model="payStyle.value"
                @tap="showPayStylePicker"
                :readonly="true"
              ></u-input>
              <u-picker
                :show="payStyle.show"
                @cancel="closePayStylePicker"
                @confirm="payStylePickerConfirm"
                :columns="payStyle.columns"
                keyName="label"
                :immediateChange="true"
              ></u-picker>
            </u-form-item>
            <u-form-item label="月份">
              <u-input
                v-model="payMonth.value"
                @tap="showPayMonthPicker"
                :readonly="true"
              ></u-input>
              <MultiplePicker
                :show="payMonth.show"
                @cancel="closePayMonthPicker"
                @confirm="payMonthPickerConfirm"
                :columns="payMonth.columns"
                :defaultIndex="payMonth.index"
                keyName="label"
                :immediateChange="true"
              ></MultiplePicker>
            </u-form-item>
            <u-form-item
              label="部门问题"
              label-position="top"
              label-width="200rpx"
            >
              <Cascader
                :valueList="formData.departmentQuestion"
                @edit="departmentEdit"
                @clear="departmentClear"
                @add="departmentAdd"
                @remove="departmentRemove"
              ></Cascader>
            </u-form-item>
            <u-form-item
              label="业主问题"
              label-position="top"
              label-width="200rpx"
            >
              <view style="margin-top: 10rpx">
                <u-textarea
                  v-model="formData.ownerQuestion"
                  :maxlength="-1"
                  height="500rpx"
                ></u-textarea>
              </view>
            </u-form-item>
          </u-form>
        </Scroll>
      </view>
      <u-button @click="edit" type="primary">
        <text style="font-size: 40rpx">修改</text>
      </u-button>
    </view>
  </Layout>
</template>

<script>
import Layout from "@/pages/component/layout/index.vue";
import Scroll from "@/pages/component/scroll/index.vue";
import { getMultiplePickerValue, getPickerValue } from "@/util/picker";
import { getOwnerByAll } from "@/api/owner";
import MultiplePicker from "@/pages/component/multiple-picker/index.vue";
import Cascader from "@/pages/component/cascader/index.vue";
import { editOwnerByUuid } from "@/api/owner";
import { showEditOkToast, showEditErrorToast } from "@/util/message/index";
import { editTaskByUuid } from "@/api/task";

function getAllMonth() {
  let result = [];
  for (let i = 1; i <= 12; i++) {
    let item = {
      label: `${i}月`,
      value: `${i}月`,
    };
    result.push(item);
  }
  return result;
}
export default {
  name: "OwnerEdit",
  components: { Cascader, MultiplePicker, Layout, Scroll },
  onLoad(event) {
    this.formData = JSON.parse(event.owner);
    if (this.formData.decorationStatus === "1") {
      this.decorationStatus.value = "是";
    } else if (this.formData.decorationStatus === "2") {
      this.decorationStatus.value = "否";
    }
    if (this.formData.liveStatus === "1") {
      this.liveStatus.value = "是";
    } else if (this.formData.liveStatus === "2") {
      this.liveStatus.value = "否";
    }
    if (this.formData.oweStatus === "1") {
      this.oweStatus.value = "是";
    } else if (this.formData.oweStatus === "2") {
      this.oweStatus.value = "否";
    }
    this.payStyle.value = this.formData.payStyle;
    this.ownerType.value = this.formData.ownerType;
    this.payMonth.value = JSON.stringify(this.formData.payMonth);
    this.payMonth.index = this.formData.payMonth;
    this.setRules();
  },
  onShow() {
    getOwnerByAll()
      .then((result) => {
        this.allOwner = result.data.list.map((owner) => {
          return {
            ...owner,
            departmentQuestion: JSON.parse(owner.departmentQuestion),
            payMonth: JSON.parse(owner.payMonth),
          };
        });
      })
      .catch((error) => {});
  },
  methods: {
    setRules() {
      this.$refs.form.setRules({
        name: [
          {
            required: true,
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              if (value.length === 0) {
                return callback(new Error("必填项"));
              }
              if (value.startsWith(" ") || value.endsWith(" ")) {
                return callback(new Error("首尾不允许存在不可见字符"));
              }
              return callback();
            },
          },
        ],
        address: [
          {
            required: true,
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              if (value.length === 0) {
                return callback(new Error("必填项"));
              }
              if (value.startsWith(" ") || value.endsWith(" ")) {
                return callback(new Error("首尾不允许存在不可见字符"));
              }
              return callback();
            },
          },
        ],
      });
    },
    async edit() {
      try {
        await this.$refs.form.validate();
        let result = await uni.showModal({
          title: "确认提示",
          content: "确认修改业主信息",
        });
        if (result.confirm && !result.cancel) {
          let tempFormData = { ...this.formData };
          tempFormData.departmentQuestion = JSON.stringify(
            tempFormData.departmentQuestion
          );
          tempFormData.payMonth = JSON.stringify(tempFormData.payMonth);
          await editOwnerByUuid(tempFormData);
          await uni.navigateBack();
          showEditOkToast();
        }
      } catch (error) {
        showEditErrorToast(new Error("必填项未填写"));
      }
    },
    departmentRemove(index) {
      if (this.formData.departmentQuestion.length === 1) {
        return;
      }
      this.formData.departmentQuestion.splice(index, 1);
    },
    departmentAdd() {
      this.formData.departmentQuestion.push([]);
    },
    departmentClear(index) {
      this.$set(this.formData.departmentQuestion, index, [[]]);
    },
    departmentEdit({ value, index }) {
      this.$set(this.formData.departmentQuestion, index, [...value]);
    },
    payMonthPickerConfirm(event) {
      this.payMonth.value =
        getMultiplePickerValue(event).length === 0
          ? ""
          : JSON.stringify(
              getMultiplePickerValue(event).map((item) => item.label)
            );
      this.payMonth.index =
        getMultiplePickerValue(event).length === 0
          ? []
          : getMultiplePickerValue(event).map((item) => {
              return item.value;
            });

      this.formData.payMonth = getMultiplePickerValue(event).map(
        (item) => item.value
      );
      this.closePayMonthPicker();
    },
    closePayMonthPicker() {
      this.payMonth.show = false;
    },
    showPayMonthPicker() {
      this.payMonth.show = true;
    },
    payStylePickerConfirm(event) {
      this.payStyle.value =
        getPickerValue(event)[0].label === "忽略"
          ? ""
          : getPickerValue(event)[0].label;
      this.formData.payStyle = getPickerValue(event)[0].value;
      this.closePayStylePicker();
    },
    closePayStylePicker() {
      this.payStyle.show = false;
    },
    showPayStylePicker() {
      this.payStyle.show = true;
    },
    oweStatusPickerConfirm(event) {
      this.oweStatus.value =
        getPickerValue(event)[0].label === "忽略"
          ? ""
          : getPickerValue(event)[0].label;
      this.formData.oweStatus = getPickerValue(event)[0].value;
      this.closeOweStatusPicker();
    },
    closeOweStatusPicker() {
      this.oweStatus.show = false;
    },
    showOweStatusPicker() {
      this.oweStatus.show = true;
    },
    nameClear() {
      this.formData.name = "";
    },
    addressClear() {
      this.formData.address = "";
    },
    search() {
      let formData = JSON.stringify(this.formData);
      uni.navigateTo({
        url: `/sub/owner/home-info/list/index?formData=${formData}`,
      });
    },
    ownerTypePickerConfirm(event) {
      this.ownerType.value =
        getPickerValue(event)[0].label === "忽略"
          ? ""
          : getPickerValue(event)[0].label;
      this.formData.ownerType = getPickerValue(event)[0].value;
      this.closeOwnerTypePicker();
    },
    closeOwnerTypePicker() {
      this.ownerType.show = false;
    },
    showOwnerTypePicker() {
      this.ownerType.show = true;
    },
    liveStatusPickerConfirm(event) {
      this.liveStatus.value =
        getPickerValue(event)[0].label === "忽略"
          ? ""
          : getPickerValue(event)[0].label;
      this.formData.liveStatus = getPickerValue(event)[0].value;
      this.closeLiveStatusPicker();
    },
    closeLiveStatusPicker() {
      this.liveStatus.show = false;
    },
    showLiveStatusPicker() {
      this.liveStatus.show = true;
    },
    decorationStatusPickerConfirm(event) {
      this.decorationStatus.value =
        getPickerValue(event)[0].label === "忽略"
          ? ""
          : getPickerValue(event)[0].label;
      this.formData.decorationStatus = getPickerValue(event)[0].value;
      this.closeDecorationStatusPicker();
    },
    closeDecorationStatusPicker() {
      this.decorationStatus.show = false;
    },
    showDecorationStatusPicker() {
      this.decorationStatus.show = true;
    },
    homeStatusPickerConfirm(event) {
      this.formData.homeStatus = getPickerValue(event)[0].value;
      this.closeHomeStatusPicker();
    },
    closeHomeStatusPicker() {
      this.homeStatus.show = false;
    },
    showHomeStatusPicker() {
      this.homeStatus.show = true;
    },
    homeTypePickerConfirm(event) {
      this.formData.homeType = getPickerValue(event)[0].value;
      this.closeHomeTypePicker();
    },
    closeHomeTypePicker() {
      this.homeType.show = false;
    },
    showHomeTypePicker() {
      this.homeType.show = true;
    },
    groupPickerConfirm(event) {
      this.formData.groupName = getPickerValue(event)[0].value;
      this.closeGroupPicker();
    },
    closeGroupPicker() {
      this.groupName.show = false;
    },
    showGroupPicker() {
      this.groupName.show = true;
    },
  },
  data() {
    return {
      formData: { name: "", address: "" },
      allOwner: [],
      payMonth: {
        index: [],
        value: "",
        show: false,
        columns: getAllMonth(),
      },
      payStyle: {
        value: "",
        show: false,
        columns: [
          [
            {
              label: "月度缴费",
              value: "月度缴费",
            },
            {
              label: "季度缴费",
              value: "季度缴费",
            },
            {
              label: "半年缴费",
              value: "半年缴费",
            },
            {
              label: "全年缴费",
              value: "全年缴费",
            },
          ],
        ],
      },
      ownerType: {
        value: "",
        show: false,
        columns: [
          [
            {
              label: "A 友好关系户",
              value: "A 友好关系户",
            },
            {
              label: "B 一般客户",
              value: "B 一般客户",
            },
            {
              label: "E 意见客户",
              value: "E 意见客户",
            },
          ],
        ],
      },
      liveStatus: {
        value: "",
        show: false,
        columns: [
          [
            {
              label: "是",
              value: "1",
            },
            {
              label: "否",
              value: "2",
            },
          ],
        ],
      },
      groupName: {
        show: false,
        columns: [
          [
            {
              label: "超豪样板间",
              value: "超豪样板间",
            },
            {
              label: "峰景",
              value: "峰景",
            },
            {
              label: "凤鸣翠岭",
              value: "凤鸣翠岭",
            },
            {
              label: "观山",
              value: "观山",
            },
            {
              label: "观山二期",
              value: "观山二期",
            },
            {
              label: "山居小墅",
              value: "山居小墅",
            },
            {
              label: "山语",
              value: "山语",
            },
            {
              label: "商铺",
              value: "商铺",
            },
            {
              label: "桐林人家",
              value: "桐林人家",
            },
            {
              label: "玺园",
              value: "玺园",
            },
            {
              label: "映山",
              value: "映山",
            },
            {
              label: "锦绣江山",
              value: "锦绣江山",
            },
          ],
        ],
      },
      homeType: {
        show: false,
        columns: [
          [
            {
              label: "住宅",
              value: "住宅",
            },
            {
              label: "商铺",
              value: "商铺",
            },
            {
              label: "车库",
              value: "车库",
            },
            {
              label: "车位",
              value: "车位",
            },
          ],
        ],
      },
      homeStatus: {
        show: false,
        columns: [
          [
            {
              label: "已售已收楼",
              value: "已售已收楼",
            },
            {
              label: "应收未收楼",
              value: "应收未收楼",
            },
            {
              label: "已售未到合同收楼期",
              value: "已售未到合同收楼期",
            },
            {
              label: "未收空置",
              value: "未收空置",
            },
          ],
        ],
      },
      decorationStatus: {
        value: "",
        show: false,
        columns: [
          [
            {
              label: "是",
              value: "1",
            },
            {
              label: "否",
              value: "2",
            },
          ],
        ],
      },
      oweStatus: {
        value: "",
        show: false,
        columns: [
          [
            {
              label: "是",
              value: "1",
            },
            {
              label: "否",
              value: "2",
            },
          ],
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.input::v-deep {
  input {
    z-index: 999999999;
  }
  .u-input__content__clear {
    z-index: 999999999;
  }
}
</style>
